import React, { useState, useRef, forwardRef } from "react";
import { Form, Input, Button, message, Modal, FormInstance } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import { CreateConnection } from "../../wailsjs/go/services/ConnectionService";
import { types } from "../../wailsjs/go/models";
import { TestConnection } from "../../wailsjs/go/services/MysqlService";
/**
 * 新建或者更新MySQL连接信息
 * @returns
 */
const Connection = forwardRef((props, ref: any) => {
  return (
    <Form
      layout="horizontal"
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 20 }}
      style={{ maxWidth: 500, margin: "0 auto", marginTop: 40 }}
      initialValues={{
        name: "localhost",
        config: {
          host: "127.0.0.1",
          port: 3306,
          user: "root",
        },
      }}
      ref={ref}
    >
      <Form.Item name="uuid" hidden>
        <Input type="hidden" />
      </Form.Item>
      <Form.Item
        label="连接名称"
        name="name"
        rules={[{ required: true, message: "请输入连接名称" }]}
      >
        <Input placeholder="如 我的测试环境" allowClear />
      </Form.Item>
      <Form.Item
        label="主机"
        name={["config", "host"]}
        rules={[{ required: true, message: "请输入主机地址" }]}
      >
        <Input placeholder="如 127.0.0.1" allowClear />
      </Form.Item>
      <Form.Item
        label="端口"
        name={["config", "port"]}
        rules={[{ required: true, message: "请输入端口号" }]}
      >
        <Input type="number" placeholder="如 3306" allowClear />
      </Form.Item>
      <Form.Item
        label="用户名"
        name={["config", "user"]}
        rules={[{ required: true, message: "请输入用户名" }]}
      >
        <Input placeholder="如 root" allowClear />
      </Form.Item>
      <Form.Item
        label="密码"
        name={["config", "password"]}
        rules={[{ required: true, message: "请输入密码" }]}
      >
        <Input.Password placeholder="请输入密码" allowClear />
      </Form.Item>
    </Form>
  );
});

const AddConnection = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const formRef = useRef<FormInstance<types.Connection>>(null);
  return (
    <>
      <Button
        type="primary"
        icon={<PlusOutlined />}
        style={{ width: 32 }}
        onClick={() => setIsModalOpen(true)}
      />
      <Modal
        open={isModalOpen}
        onCancel={() => setIsModalOpen(false)}
        destroyOnClose={true}
        footer={
          <>
            <Button
              onClick={() =>
                formRef.current
                  ?.validateFields()
                  .then((value: types.Connection) => {
                    TestConnection(value).then((res: types.JSResp) => {
                      if (res.success) {
                        message.success(res.msg);
                      } else {
                        message.error(res.msg);
                      }
                    });
                  })
              }
            >
              测试连接
            </Button>
            <Button
              type="primary"
              onClick={() =>
                formRef.current?.validateFields().then((value) => {
                  CreateConnection(value as types.Connection).then((res) => {
                    if (res.success) {
                      message.success(res.msg);
                      setIsModalOpen(false);
                    } else {
                      message.error(res.msg);
                    }
                  });
                })
              }
            >
              保存
            </Button>
          </>
        }
      >
        <Connection ref={formRef} />
      </Modal>
    </>
  );
};

export { AddConnection };
